<!--
 * @Author: H.
 * @Date: 2021-09-27 08:38:22
 * @LastEditTime: 2021-11-24 17:30:58
 * @Description: 
-->
<template>
  <div>
    <h1>Toast 示例</h1>
    <Demo :component="ToastDemo1" />
    <Demo :component="ToastDemo2" />
    <h2>Toast Attributes</h2>
    <Table :dataSource="dataSource" :columns="columns" />
  </div>
</template>

<script lang="ts">
import Demo from './Demo/index.vue'
import ToastDemo1 from './Demo/ToastDemo1.vue'
import ToastDemo2 from './Demo/ToastDemo2.vue'
import Table from '../lib/table/Table.vue'
export default {
  components: {
    Demo,
    Table,
  },
  setup(props) {
    const dataSource = [
      {
        id: 1,
        params: 'autoClose',
        illustrate: '自定义toast关闭时间',
        type: 'boolean/number',
        optional: '-',
        defaults: '3',
      },
      {
        id: 2,
        params: 'callback',
        illustrate: '手动关闭toast的回调',
        type: 'function',
        optional: '-',
        defaults: '-',
      },
      {
        id: 3,
        params: 'htmlContent',
        illustrate: '支持html内容',
        type: 'string',
        optional: '-',
        defaults: '-',
      },
      {
        id: 4,
        params: 'enableHtml',
        illustrate: '是否展示HTML内容',
        type: 'string',
        optional: '-',
        defaults: '-',
      },
      {
        id: 5,
        params: 'position',
        illustrate: 'toast从什么位置出现',
        type: 'string',
        optional: 'top/bottom/middle',
        defaults: 'top',
      },
    ]
    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '100' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]
    return { ToastDemo1, ToastDemo2, columns, dataSource }
  },
}
</script>

<style></style>
